<template>
  <div class="city">
    <Distpicker
      v-model="regionCodes"
      class="dist"
      :province-disabled="proDisabled"
      :city-disabled="cityDisabled"
      :area-disabled="areaDisabled"
      :province="regionCode.province"
      :city="regionCode.city"
      :area="regionCode.area"
      @province="getprovince"
      @city="getcity"
      @area="getarea"
    />
  </div>
</template>

<script>
import Distpicker from 'v-distpicker'
export default {
  components: { Distpicker },
  props: {
    regionCode: {
      type: Object,
      default: () => ({
        province: '',
        city: '',
        area: ''
      })
    },
    proDisabled: {
      type: Boolean,
      default: true
    },
    cityDisabled: {
      type: Boolean,
      default: false
    },
    areaDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      select: { ...this.regionCode }
    }
  },
  computed: {
    regionCodes() {
      return this.regionCode
    }
  },
  created() {},
  methods: {
    getprovince(res) {
      // console.log('getprovince')
      // console.log(res)
      this.select.province = res.code
      // this.select.city = ''
      // this.select.area = ''
      this.$emit('emitCity', this.select)
    },
    getcity(res) {
      // console.log("getcity")
      // console.log(res)
      this.select.city = res.code
      this.$emit('emitCity', this.select)
    },
    getarea(res) {
      // console.log("getarea")
      // console.log(res)
      this.select.area = res.code
      this.$emit('emitCity', this.select)
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
</style>
